<template>
  <div style="display:flex;width:100%">
    <div style="flex-grow:8;flex-wrap: wrap;">
      <codemirror
        v-model="code"
        placeholder="Coding..."
        :style="{ height: '100vh' ,' text-align':'left', 'font-size':'20px'}"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="4"
        :extensions="extensions"
        @ready="handleReady"
        @change="log('change', $event)"
        @focus="log('focus', $event)"
        @blur="log('blur', $event)"
      />
    </div>
    <div style="flex-basis: 400px;">
      <div style="margin-top: 25px;">
        <el-button type="success" round @click="codeRun">
          <el-icon size="20"><CaretRight /></el-icon>
          运行
        </el-button>
        <el-switch
          v-model="theme"
          class="mt-2"
          style="margin-left: 24px"
          inline-prompt
          active-icon="Moon"
          inactive-icon="Sunny"
          @change="themeChange"
        />
      </div>
      
      <el-divider />

      {{result}}

    </div>
  </div>
</template>
<script>
import { postAction, getAction } from '@/util/request.js'
import { trim } from '@/util/stringutils.js'
import { defineComponent, ref, shallowRef } from 'vue'
import { Codemirror } from 'vue-codemirror'
import { java } from '@codemirror/lang-java'
import { oneDark } from '@codemirror/theme-one-dark'

export default defineComponent({
  components: {
    Codemirror
  },
  setup() {
    const code = ref(`import java.util.Arrays;
public class User {

  int[] a = {2,3,4,1,9,8,5,6};

  public int[] sort() {
    Arrays.sort(a);
    return a;
  }  
}`)
    const theme = ref(true)
    const themeChange = (t)=>{
      if(t) {
        extensions.value = [java(), oneDark]
      } else {
        extensions.value = [java()]
      }
    }
    const extensions = ref([java(), oneDark])

    // Codemirror EditorView instance ref
    const view = shallowRef()
    const handleReady = (payload) => {
      view.value = payload.view
    }

    // Status is available at all times via Codemirror EditorView
    const getCodemirrorStates = () => {
      const state = view.value.state
      const ranges = state.selection.ranges
      const selected = ranges.reduce((r, range) => r + range.to - range.from, 0)
      const cursor = ranges[0].anchor
      const length = state.doc.length
      const lines = state.doc.lines
    }

    const url = "/code/java/execute"
    let result = ref('')
    const codeRun = ()=> {
      result.value = '运行中，请等待...'

      postAction(
        url,
        {code: trim(code.value)}
      ).then(res=>{
        if(res.code == 1) {
          if(res.data.code == 0) {
            result.value = res.data.msg
          }
            
          let timer
          timer = setInterval(function() {
            getAction('/execute/result/get/' + res.data.number, {}).then(r=>{
                if(r.code == 1) {
                  if(r.data.result == 1) {
                    clearInterval(timer)
                    result.value = '运行结果:' + r.data.data
                  }
                  if(r.data.result == 0) {
                    clearInterval(timer)
                    result.value = r.data.msg
                  }
                }
                if(r.code == 2) {
                  //继续循环
                }
              })
            }, 600)
          }

          if(res.code == 2) {
            result.value = '运行异常:' + res.msg
          }
          
        })
      }
      return {
        code,
        extensions,
        handleReady,
        codeRun,
        log: console.log,
        theme,
        themeChange,
        result
      }
    }
  })
</script>